<template>
  <div class="workBriefing">
    <div class="board">
      <div class="title">
        每周小结
        <i class="icon ic_more" @click="toSummary('week')"></i>
      </div>
      <div class="content">
        <div class="content-left"></div>
        <div class="content-right">
          <p>{{info.week.summaryMsg}}</p>
          <div class="btn" @click="toDetails('week')">本周详情</div>
        </div>
      </div>
    </div>
    <div class="board month">
      <div class="title">
        每月小结
        <i class="icon ic_more" @click="toSummary('month')"></i>
      </div>
      <div class="content">
        <div class="content-left content-left-month"></div>
        <div class="content-right">
          <p>{{info.month.summaryMsg}}</p>
          <div class="btn" @click="toDetails('month')">本月详情</div>
        </div>
      </div>
    </div>
    <loading v-if="is_show_loading"></loading>
  </div>
</template>

<script>
  import loading from '@/components/loading'
  export default {
    name: "WorkBriefing",
    components: {
      loading
    },
    data() {
      return {
        is_show_loading:true,
        info:{
          month:{
            summaryMsg:'',
          },
          week:{
            summaryMsg:'',
          },
        }
      }
    },
    created(){
      this.getInfo();
    },
    methods:{
      //
      getInfo(){
        this.$http.get('/project/project/count/pcWeekMonthSummaryFirst',{
          params:{
            companyId:this.$store.state.userInfo.companyId
          },
        }).then(res=>{
          if(res.statusCode==200){
            this.info=res.data;
            setTimeout(() => {
              this.is_show_loading=false;
            },1000)
          }else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      //去小结
      toSummary(type){
        this.$router.push({
          path: '/smart/workBriefingSummary',
          query: {type: type}
        });
      },
      //去详情
      toDetails(type){
        if(type=='week'){
          this.$router.push({path: '/smart/workBriefingDetailsWeek',});
        }else if(type=='month'){
          this.$router.push({path: '/smart/workBriefingDetailsMonth',});
        }
      },
    },
  }
</script>

<style scoped type="text/scss" lang="scss">
  .workBriefing {
    display: flex;
    height: 100%;
    width: 100%;

    .board {
      width: 400px;
      height: 270px;
      background-color: #FFFFFF;
      border-radius: 6px;
      margin-right: 16px;
      padding: 0 32px;
      position: relative;

      .title {
        padding-top: 32px;
        color: #454A55;
        font-weight: bold;
        font-size: 16px;
        position: relative;

        i {
          position: absolute;
          top: 32px;
          right: 0;
          cursor: pointer;
        }
      }

      .content {
        padding-top: 47px;
        display: flex;

        .content-left {
          width: 67px;
          height: 87px;
          border: 1px solid #EEEEEE;
          background-image: url("../../../assets/img/smart/workBriefing/ic_week.png");
          background-size: cover;
          background-position: center;
        }

        .content-left-month {
          background-image: url("../../../assets/img/smart/workBriefing/ic_month.png");
        }

        .content-right {
          padding-left: 40px;
          flex: 1;

          > p {
            padding-top: 10px;
            color: #96A2AA;
            line-height: 25px;
            font-size: 14px;
          }

          > .btn {
            width: 72px;
            line-height: 32px;
            text-align: center;
            border: 1px solid #CAD0D4;
            font-size: 12px;
            color: #96A2AA;
            border-radius: 4px;
            position: absolute;
            bottom: 40px;
            left: 163px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
